<template>
  <view class="mine-page">
    <!-- 用户信息区域 -->
    <view class="user-info">
      <u-avatar :src="userInfo.avatar" size="120rpx"></u-avatar>
      <view class="user-details">
        <text class="user-name">{{ userInfo.name }}</text>
        <text class="user-phone">{{ userInfo.phone }}</text>
      </view>
    </view>

    <!-- 功能菜单 -->
    <view class="menu-list">
      <view class="menu-item" v-for="(item, index) in menuList" :key="index" @click="handleMenuClick(item)">
        <u-icon :name="item.icon" size="40rpx" :color="item.color"></u-icon>
        <text class="menu-text">{{ item.title }}</text>
        <u-icon name="arrow-right" size="24rpx" color="#999"></u-icon>
      </view>
    </view>

    <!-- 底部按钮 -->
    <view class="footer">
      <u-button type="primary" @click="logout">退出登录</u-button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {
        avatar:
          "https://images.unsplash.com/photo-1631049552057-403cdb8f0658?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80",
        name: "魏小然",
        phone: "13800138000",
      },
      menuList: [
        {
          title: "我的订单",
          icon: "order",
          color: "#409EFF",
          path: "/pages/order/order",
        },
        {
          title: "设置",
          icon: "setting",
          color: "#909399",
          path: "/pages/setting/setting",
        },
      ],
    };
  },
  methods: {
    handleMenuClick(item) {
      uni.navigateTo({
        url: item.path,
      });
    },
    logout() {
      uni.showModal({
        title: "提示",
        content: "确定要退出登录吗？",
        success: res => {
          if (res.confirm) {
            uni.reLaunch({
              url: "/pages/login/login",
            });
          }
        },
      });
    },
  },
};
</script>

<style lang="scss">
.mine-page {
	 
  padding: 20rpx;
  background-color: #f8f8f8;
  min-height: 100vh;
}

.user-info {
  display: flex;
  align-items: center;
  padding: 30rpx;
  background-color: #fff;
  border-radius: 12rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  margin-bottom: 20rpx;

  .user-details {
    margin-left: 20rpx;
    display: flex;
    flex-direction: column;

    .user-name {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }

    .user-phone {
      font-size: 24rpx;
      color: #909399;
      margin-top: 10rpx;
    }
  }
}

.menu-list {
  background-color: #fff;
  border-radius: 12rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);

  .menu-item {
    display: flex;
    align-items: center;
    padding: 20rpx;
    border-bottom: 1rpx solid #eee;

    &:last-child {
      border-bottom: none;
    }

    .menu-text {
      flex: 1;
      font-size: 28rpx;
      color: #333;
      margin-left: 20rpx;
    }
  }
}

.footer {
  margin-top: 40rpx;
  padding: 20rpx;

  .u-button {
    width: 100%;
  }
}
</style>
